<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>游戏网站</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <!--    <link href="layui/layui.css" rel="stylesheet">-->

    <link rel="stylesheet" href="bootstrap/bootstrap.min.css">
    <!--引入图标库-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

    <link rel="stylesheet" href="elementUI/elementCSS.css"/>
    <!--    &lt;!&ndash;引入element的图标库&ndash;&gt;-->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.14/dist/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <!-- 引入ECharts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }

        /* 自定义其他任意主题  */
        .class-layer-demo-custom .layui-layer-title {
            background-color: #40b99f;
        }

        .class-layer-demo-custom .layui-layer-btn {
            padding: 5px 10px 10px;
        }

        .class-layer-demo-custom .layui-layer-btn a {
            background: #fff;
            border-color: #E9E7E7;
            color: #333;
        }

        .class-layer-demo-custom .layui-layer-btn .layui-layer-btn0 {
            border-color: #FA584D;
            background-color: #FA584D;
            color: #fff;
        }


        /*问答项目样式start*/
        .qa-item {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            padding: 20px;
        }

        .question {
            font-weight: bold;
            font-size: 1.2em;
            color: #333;
        }

        .user, .created-time, .admin, .reply-time {
            color: #777;
            font-size: 0.9em;
        }

        .answer {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #eee;
        }

        .stars {
            color: #f39c12;
        }

        /* 问答项目样式 end */
    </style>
</head>

<body>
<div id="app" v-cloak>

    <!--头部-->
    <nav class="navbar">
        <div class="nav-container" style="width: 100%;position: relative;">
            <a href="book.html" class="brand"><i class="bi bi-house-door"></i> 首页</a>
            <ul class="nav-links">
                <li><a href="dingdan.html"><i class="bi bi-clipboard-data"></i> 我的订单</a></li>
                <li><a href="gouwuche.html"><i class="bi bi-cart"></i> 我的购物车</a></li>
                <li><a href="myborrow.html"><i class="bi bi-journal-check"></i> 借书记录</a></li>
                <li><a href="#"><i class="bi bi-heart"></i> 我的收藏</a></li>
                <li><a href="gonggao.html"><i class="bi bi-megaphone"></i> 系统公告(5)</a></li>
                <li><a href="wenda.html"><i class="bi bi-chat-text"></i> 问答(5)</a></li>
                <li style="margin-left: 100px;">
                    <img @click="show_alter_info" style="width: 32px;cursor: pointer;" :src="user.profile" alt="">
                </li>
                <li><a href="zhuye.html"><i class="bi bi-person"></i> 主页</a></li>
                <li @click="logout"><i class="bi bi-box-arrow-right"></i> 退出登录</li>
            </ul>
        </div>
    </nav>
    <!--头部end-->

    <div class="header-bg">
        <img src="img/4.jpg" alt="">
        <div class="nimate__animated animate__rubberBand ">
            <div class="title a" style="cursor: pointer;" @click="ask_question">
                我也要问
            </div>
        </div>

    </div>


    <div class="content w py-3 contentFaq">

        <!--右边栏-->
        <div class="content-l">
            <h4 class="mb-3">所有问答</h4>
            <!--一个一个问答项目-->
            <!-- <div v-for="(item,index) in 4" :key="index" class="box-card mb-3">
                 <el-card class="box-card">
                     <div class="box mb-3">
                         1.游戏怎么玩呢？{{item}}
                     </div>
                 </el-card>

                 <div class="box mb-5">
                     游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩游戏这样玩
                 </div>
             </div>-->
            <div class="qa-item" v-for="(wenda,index) in isreplyWenda_list" :key="index">
                <div class="question">{{wenda.question}}</div>

                <div class="user">提问用户: {{wenda.user}}</div>
                <div class="stars">评分: {{renderStars(wenda.quality)}}</div>
                <div class="created-time">创建时间: {{wenda.createTime}}</div>
                <div class="answer">
                    <div v-html="wenda.answer_html"></div>
                    <div class="reply-time">回复时间: {{wenda.replytime}}</div>
                    <div class="admin">回复管理员: 罗邓管理员</div>
                </div>
            </div>

        </div>


        <div class="content-r">
            <h4 class="mb-3">问答热点</h4>

            <el-card class="box-card">
                <div>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <!-- <div>
                                 <el-statistic
                                         group-separator=","
                                         :precision="0"
                                         :value="value1"
                                         :title="title"></el-statistic>
                             </div>-->
                        </el-col>
                    </el-row>
                </div>

                <!-- 在这里放置饼图，显示问答数量的饼图-->
                <!-- 饼图容器 -->
                <div ref="chart" class="chart-container" style="width: 100%; height: 400px;"></div>
            </el-card>

            <el-card class="box-card">
                <div class="box mb-3" style=" padding: 10px; border-radius: 8px;">
                    <h4 style="font-size: 1.5em; margin-bottom: 16px;">已回复问答区</h4>
                    <ul style="list-style-type: none; padding: 0;">
                        <li v-for="(wenda, index) in isreplyWenda_list"
                            :key="index"
                            style="background: #f9f9f9; margin-bottom: 8px; padding: 10px 15px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                            {{index+1}} . {{abbreviateString(wenda.question)}}
                        </li>
                    </ul>
                </div>
            </el-card>

            <el-card class="box-card">
                <div class="box mb-3">
                    <h4>未回复问答区</h4>
                    <ul style="list-style-type: none; padding: 0;">
                        <li v-for="(wenda, index) in noreplyWenda_list"
                            :key="index"
                            style="background: #f9f9f9; margin-bottom: 8px; padding: 10px 15px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
                            {{index+1}} . {{abbreviateString(wenda.question)}}
                        </li>
                    </ul>
                </div>
            </el-card>

            <h4 class="mb-3">网站信息</h4>
            <footer class="footer shadow-lg">
                <!--<iframe src="https://yiyan.baidu.com/"></iframe>-->
            </footer>
        </div>
    </div>
</div>
<!-- 引入 jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 引入 layui.js -->
<script src="layui/layui.js"></script>
<script src="bootstrap/bootstrap.min.js"></script>
<script src="js/vue@2.js"></script>
<!-- 引入 Axios 库 -->
<script src="js/axios.min.js"></script>
<script src="elementUI/elementJS.js"></script>
<script src="js/data.js"></script>
<script src="js/pulblicfuntion.js"></script>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                like: true,
                value1: 0,
                title: "问答数量",
                user: {},
                isreplyWenda_list: [],
                noreplyWenda_list: [],
            }
        },
        methods: {
            abbreviateString(str) {
                if (str.length <= 20) {
                    return str;
                }
                return str.substring(0, 20) + '...';
            },
            renderStars(quality) {
                let stars = '';
                for (let i = 0; i < 5; i++) {
                    if (i < quality) {
                        stars += '★';
                    } else {
                        stars += '☆';
                    }
                }
                return stars;
            },
            show_alter_info() {
                showUserAvatar(this.user);
            }
            ,
            logout() {
                logout();
            },
            ask_question() {
                var that = this;
                //
                layer.open({
                    type: 1, // page 层类型
                    area: ['700px', '400px'],
                    title: '输入你的问题，我们会尽快为你解答！',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: false, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    closeBtn: 1,
                    skin: 'class-layer-demo-custom', // 自定义皮肤
                    content: `<div style="padding: 20px;">
                          <div class="layui-form-item">
                              <label class="layui-form-label" style="width: 103px;">问题标题</label>
                              <div class="layui-input-block">
                                  <input type="text" name="title" required  lay-verify="required" placeholder="请输入问题标题" autocomplete="off" class="layui-input">
                              </div>
                          </div>
                          <div class="layui-form-item">
                              <label class="layui-form-label" style="width: 103px;">问题详情</label>
                              <div class="layui-input-block">
                                  <textarea name="content" placeholder="请输入问题详细描述" class="layui-textarea"></textarea>
                              </div>
                          </div>
                          <div class="layui-form-item">
                              <div class="layui-input-block">
                                  <button class="layui-btn" lay-submit lay-filter="formDemo" id="submit_question">提交</button>
                              </div>
                          </div>
                      </div> `,
                    success: (layero, index) => {
                        /*layero是Jquery对象，可以对其进行各种操作*/
                        // 绑定提交按钮的点击事件
                        layero.find('#submit_question').on('click', () => {
                            // 获取表单元素的值
                            var title = layero.find('input[name="title"]').val();
                            var content = layero.find('textarea[name="content"]').val();

                            // 检查表单值是否填写
                            if (title.trim() === '') {
                                alert('请填写完整的标题!');
                                return false;
                            }
                            if (content.trim() === '') {
                                layer.confirm('详细描述为空，是否继续提交？', {
                                    btn: ['确定', '关闭'] //按钮
                                }, () => {
                                    // layer.msg('确定了提交', {icon: 1});
                                    /*console.log("确定了提交")*/

                                    // 输出表单值到控制台（或执行其它的逻辑）
                                    console.log('标题:', title);
                                    console.log('内容:', content);

                                    // 可以在这里提交表单的值到服务器，使用 AJAX 请求等等。
                                    let formData = new FormData();
                                    formData.append('question', title);
                                    formData.append('detail', content);
                                    formData.append('user', that.user.username);
                                    axios.post(urlluodeng + "/wenda/addwenda", formData).then((response) => {
                                        console.log(response.data);
                                        if (response.data.result) {
                                            layer.msg('提交成功', {icon: 1, time: 2000, btn: ['确定']});
                                            // 如果需要的话，可以关闭弹层
                                            /*    layer.close(index);*/
                                        } else {
                                            layer.msg('提交失败！', {icon: 2, time: 2000, btn: ['确定']});
                                        }
                                    }).catch((error) => {
                                        console.log(error);
                                        alert('提交失败！数据请求错误！');
                                    });


                                }, () => {
                                    layer.msg('确定了不提交', {
                                        time: 20000, // 20s 后自动关闭
                                        btn: ['明白了', '知道了']
                                    });
                                    console.log("确定了不提交")
                                    return false;
                                });
                            } else {
                                //直接提交
                                // 输出表单值到控制台（或执行其它的逻辑）
                                console.log('标题:', title);
                                console.log('内容:', content);

                                // 可以在这里提交表单的值到服务器，使用 AJAX 请求等等。
                                let formData = new FormData();
                                formData.append('question', title);
                                formData.append('detail', content);
                                formData.append('user', that.user.username);
                                axios.post(urlluodeng + "/wenda/addwenda", formData).then((response) => {
                                    console.log(response.data);
                                    if (response.data.result) {
                                        layer.msg('提交成功！', {icon: 1, time: 2000, btn: ['确定']});
                                        // 如果需要的话，可以关闭弹层
                                        /*    layer.close(index);*/
                                    } else {
                                        layer.msg('提交失败！', {icon: 2, time: 2000, btn: ['确定']});
                                    }
                                }).catch((error) => {
                                    console.log(error);
                                    alert('提交失败！数据请求错误！');
                                });
                            }


                        });
                    }
                });


            }, submit_question() {
                //提交问题
                alert("提交成功")
            },
            showecart() {
                // 初始化ECharts
                const myChart = echarts.init(this.$refs.chart);

                // 配置饼图参数
                const option = {
                    title: {
                        text: '回复数量分布',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: '问答数量',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: this.isreplyWenda_list.length, name: '已回复'},
                                {value: this.noreplyWenda_list.length, name: '未回复'},
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };

                // 使用配置项显示图表
                myChart.setOption(option);

                // 监听窗口大小变化，调整图表大小
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            }

        },
        created() {
            // 读取登录用户信息
            axios.get(urlluodeng + '/user/getLoginUser').then((response) => {
                if (!response.data.result) {
                    alert(response.data.msg);
                    window.location.href = 'login.html';
                } else {
                    this.user = response.data.userData;

                    //用户信息加载完成后，加载问答数据
                    axios.get(urlluodeng + '/wenda/getNotReplyAndReplyWenda').then((response) => {
                        if (response.data.result) {

                            this.isreplyWenda_list = response.data.data.data.isReply;
                            this.noreplyWenda_list = response.data.data.data.notReply;
                            this.value1 = this.isreplyWenda_list.length + this.noreplyWenda_list.length;
                            console.log("问答数据加载完成");
                            console.log(response.data.data);
                            console.log(this.isreplyWenda_list);
                            console.log(this.noreplyWenda_list);
                            this.showecart();
                        } else {
                            alert(response.data.msg);
                        }
                    }).catch((error) => {
                        console.log(error);
                        layer.msg('网络链接失败，请稍后再试！', {icon: 2, time: 2000, btn: ['确定']});
                    });


                }
            });

        }

    });

</script>
</html>
